<template>
  <div>
    <el-form
      ref="form"
      label-width="80px"
      :v-loading="loading"
      :model="formData"
      :rules="rules"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
         <el-input v-model="formData.tel" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
         <el-input type="password" v-model="formData.password" placeholder="留空则不修改密码"></el-input>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end;">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { edit } from '@/api/user/user.js';

export default {
  props: ['data'],
  watch: {
    data: {
      handler: function (val) {
        console.log(val, 'value');
        this.formData.id = val.id;
        this.formData.username = val.username;
        this.formData.tel = val.tel;
        
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      formData: {
        id:"1007",
        username:"15889405162",
        tel:"15889405162",
        password:"",
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        tel:[
          { required: true, message: '请输入用户手机号', trigger: 'blur' },
        ]
      },
    };
  },
  methods: {
    submit() {      
      this.loading = true;
      this.$refs.form.validate((valid) => {
        if (valid) {
          edit(this.formData)
            .then((res) => {
              this.$message.success('修改成功');
              this.$emit('update:visible', false);
              this.$emit("success")
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style scoped></style>
